import React from 'react'
import type { NativeProps } from '../../utils/native-props'

export type PickerValue = string | number | null

export type PickerColumnItem = {
  label: React.ReactNode
  value: string | number
  key?: string | number
}

export type PickerValueExtend = {
  columns: PickerColumnItem[][]
  items: (PickerColumnItem | null)[]
}

export type PickerColumn = (string | PickerColumnItem)[]

export type PickerViewProps = {
  /** 每一列的选项 */
  columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[])
  /** 选中项 */
  value?: PickerValue[]
  /** 默认选中项. default: `[]` */
  defaultValue?: PickerValue[]
  /** 是否允许通过鼠标滚轮进行选择. default: `false` */
  mouseWheel?: boolean
  /** 是否处于加载状态. default: - */
  loading?: boolean
  /** 加载状态下展示的内容. default: `<SpinLoading />` */
  loadingContent?: React.ReactNode
  /** 选项改变时触发. default: - */
  onChange?: (value: PickerValue[], extend: PickerValueExtend) => void
  /** 渲染展示内容. default: `(item: PickerColumnItem) => item.label` */
  renderLabel?: (item: PickerColumnItem) => React.ReactNode
  /** 首次加载或自动回退时, 是否开启动画. default: `false` */
  initAnimate?: boolean
} & NativeProps<
 | '--height'
 | '--item-height'
 | '--item-font-size'
>

export type WheelProps = {
    index: number
    column: PickerColumnItem[]
    value: PickerValue
    /** 首次加载或自动回退时, 是否开启动画. */
    initAnimate: boolean
    onSelect: (value: PickerValue, index: number) => void
    renderLabel: (item: PickerColumnItem) => React.ReactNode
    mouseWheel: boolean
  }
